<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <keep-alive max ='10' include="Mpage,Btuan">
      <component :is="coms[chIndex]"/>
    </keep-alive>

  <div class="tabbar">
    <span :class="{colorful:chIndex==index}" @click="change(index)" v-for="(item,index) in btns" :key=index>{{item}}</span>
  </div>
  </div>
</template>

<script>
import Mpage from './components/Mpage.vue'
import Btuan from './components/Btuan.vue'
import Order from './components/Order.vue'
import Me from './components/Me.vue'
export default {
  components:{
    Mpage,
    Btuan,
    Order,
    Me
  },
  data(){
    return{
      chIndex:0,
      btns:['首页','爆爆团','订单','我的'],
      coms:[Mpage,Btuan,Order,Me]
    }
  },
  methods:{
    change(index){
      this.chIndex=index
    }
  },
  mounted(){
   
   
  }
}
</script>

<style lang="scss">
  *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .tabbar{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 8vw;
    background: white;
    position: fixed;
    bottom: 0;
  }
  .tabbar span{
    text-align: center;
  }
  .colorful{
    color: aqua;
  }
</style>
